<template>
  <div class="Ordersynthesis">
    <div class="bj">
      <van-nav-bar title="订单详情" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 46px;"></div>

    <div style="width: 100%;">
      <div style="width: 100%;height: 100%;margin-top: 1.25rem;background: #f8f8f8;">
        <div class="ticket">
          <div style="width: 95%;height: 100%;">
            <div class="adult-ticket">
              <span style="color: rgb(40, 40, 40);font-weight: 600;">{{datalist.Name}}</span>
            </div>
            <div class="aaa">
              <div style="display: flex;height: 40px;align-items: center;justify-content: space-between;padding: 0 10px;">
                <span>价格</span>
                <span style="width: 90px;text-align: center;font-size: 18px;color: #46D0CA;">￥{{datalist.Price}}</span>
              </div>
              <div style="display: flex;height: 40px;align-items: center;justify-content: space-between;padding: 0 10px;">
                <span>数量</span>
                <van-stepper v-model="stepper" @change="stepperdata" min="1" max="5" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="scheduler">
        <p class="scheduler_txt">{{UserInfoConfig.Title}}</p>
        <div class="scheduler_data">
          <div class="data_name" v-for="(name,index) in UserInfoConfig.List" :key="index">
            <span>{{name.Title}}：</span>
            <input v-show="name.Key != 'Area'" v-model="name.name" :maxlength="name.hanzhi" type="text" @click="inputdata(name.Key)" :placeholder="name.Tip" @blur="onBlurInput()" />
            <div :class="{Areaname:Areaname.length > 6}" v-model="Areaname" v-show="name.Key == 'Area'" @click="inputdata(name.Key)" style="border: 1px solid #ced4da;width: 78%; height: 25px;background: white;padding-left: 5px;line-height: 25px;color: #a9a9a9;">{{Areaname}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="terms">
      <van-checkbox v-model="checked"></van-checkbox>
      <span style="margin-left: 4px;">已阅读并通用</span>
      <span style="color: #46d0ca;margin-left: 4px;" @click="tk">安易游预定条款</span>
    </div>

    <div style="width: 100%;height: 60px;"></div>
    <div class="bottom">
      <div class="detail">
        <span style="color: #f59a23;">总额￥{{Totalcost}}</span>
        <div @click="detail">
          <span style="color: #46d0ca;margin-left: 10px;">明细</span>
          <van-icon name="arrow-up" />
        </div>
      </div>
      <van-button type="default" color="#46d0ca" @click="Result">去支付</van-button>
    </div>
    <div class="tk_box">
      <van-popup v-model="tiaokuan" closeable position="bottom">
        <div class="tiaok_txt">
          <span>安易游预定条例</span>
          <van-icon @click="gbtk" name="close" />
        </div>
        <div style="width: 100%;height: 40px;"></div>
        <div class="tiaok">
          <div style="margin-top: 10px;">1.服务内容</div>
          <p>安易游旅游网（以下简称“安易游”）各项服务的所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。"</p>
          <div>2.特别提示</div>
          <p>所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>
          <div>3.订单生效</div>
          <p>本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>
          <div>4.景区订单</div>
          <p>各项服务的所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>

        </div>
      </van-popup>
    </div>

    <van-popup v-model="arrow" position="bottom" :style="{ height: '20%' }">
      <div style="padding: 10px;font-size: 16px;">费用明细</div>
      <div style="padding: 5px 20px;display: flex;justify-content: space-between;font-size: 14px;" v-for="(arrow,index) in storagepiao" :key="index">
        <span>{{arrow.name}}</span>
        <span>{{arrow.Price}}元×{{arrow.value}}</span>
      </div>
    </van-popup>

  </div>
</template>

<script>
import {
  goodsDetails,
  CouponList,
  createOrder,
  getUserInfoByToken, //获取用户信息接口
} from '@/api/home.js'
import { getToken } from '@/utils'
import Cookies from 'js-cookie'
import AddressInfo from '@/assets/area.js'
export default {
  name: 'vdetails',
  data () {
    return {
      readonly: false,
      linkchecked: false, // 默认选中
      linkmoren: '',
      editlinkName: '',
      editlinkPhone: '',
      Areaname: '请选择省市区',
      editlinkdata: [],
      editlink: false, // 弹出填写收货人信息页面
      areaList: AddressInfo, // 选择城市
      shouhuodizhi: false, // 收货地址
      ticketshow: false, // 订票须知
      showzi: '', // 订票须知的文字
      stepper: 1, // 步进器 数量
      index: 0, // 三天时间选中的时间

      datalist: {}, // 优惠券详情数据
      checked: true, //协议
      tiaokuan: false, //安易游预定条例
      stepper: 1, //步进器 数量
      arrow: false, // 费用明细
      riqishow: false, // 日期
      price: '', // 价格
      PreSalePeriod: '',
      resdata: {},
      details_money: '',
      details_value: '1',
      // 提交
      Pricejiu: '', // 定义一个价格，传到当用户加时
      storagepiao: [], // 存储票
      Totalcost: '0', // 总价格
      jiage: [], // 定义一个价格数组
      UserInfoConfig: [], // 请求留资的数组传入

    }
  },
  created () {
    this.getUserInfoByToken()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    tk () { // 打开安易游预定条例
      this.tiaokuan = true
    },
    gbtk () {
      this.tiaokuan = false;
    },
    detail () { //费用说明
      this.arrow = true
    },
    getUserInfoByToken () {
       let data = {}
      getUserInfoByToken(data).then(res => {
        console.log(res)
        if (res.Code === 5 && res.Msg == "请先绑定手机号码") {
          this.$router.push({
            path: "/Login/BindCellphone"
          });
        } else if (res.Code == 0) {

        } else {
          Cookies.set('token', '', {
            expires: 7,
            path: '/'
          }) // 设置7天过期
        }

        // if (res.Code == 0) { } else {
        //   Cookies.set('token', '', {
        //     expires: 7,
        //     path: ''
        //   }) // 设置7天过期
        // }
      })
    },
    lianxren () {
      this.editlink = true
    },
    onBlurInput () { // 失去焦点时
      let height = document.body.scrollHeight
      window.scroll(0, height)
    },
    inputdata (data) {
      // this.disabled = false
      // window.scroll(0, 0)
      if (data == 'Area') {
        this.shouhuodizhi = true
      }
      // this.disabled = false
    },
    confirm (value) {
      this.shouhuodizhi = false
      let arr = []
      this.Areaname = value[0].name + ',' + value[1].name + ',' + value[2].name
      this.UserInfoConfig.List.forEach(e => {
        if (e.Key == "Area") {
          arr.push(value[0].name)
          arr.push(value[1].name)
          arr.push(value[2].name)
          e.name = arr
        }
      })
    },
    Result () { //下单
      // console.log(this.ticketlist)
      let dataa = 1
      let PassengerInfo = {} //提交留资信息
      let UserInfo = {} //提交预定人/收货地址信息
      let GoodsList = [] //最终提交的参数
      let newObj = {}
      newObj.gSN = this.$route.query.gSN
      newObj.sharecode = Cookies.get("sharecode") || ''
      if (this.checked == true) { //不用选
        // GoodsList.push({"gSN": this.$route.query.gSN,})
        if (this.stepper == 0) {
          // console.log('请选择数量')
          this.$toast('请选择数量');
        } else {
          newObj.Num = this.stepper
        }
        // console.log(this.UserInfoConfig.List)


        if(!(!this.UserInfoConfig.List)){
        this.UserInfoConfig.List.forEach(v => { //下单填写资料//
          let key = v.Key
          // console.log(v.name)
          if (v.name == '') {
            this.$toast('请填写完整资料');
          } else {
            UserInfo[key] = v.name
          }
        })
        }
        newObj.PassengerInfo = PassengerInfo
        newObj.UserInfo = UserInfo
        // console.log(newObj)
        GoodsList = [newObj]
        let data = {
          GoodsList: GoodsList,
        }
        console.log(data)

        createOrder(data).then(res => {
          if (res.Code == 0) {
            // console.log(res)
            this.$toast.loading({
              message: '正在提交订单...',
              forbidClick: true,
            });

             let urldata ="https://www.anyiyou.cn/view/#/User/UserOrderdetails";
            // console.log(urldata)
             let url = urldata + '?ordSN=' + res.ordSN

            // let url = "http://www.anyiyou.cn/view/#/me"
            window.location.href = "https://www.anyiyou.cn/public/program/pay/auto.aspx?sns=" + res.ordSN +

              "&bkurl=" + escape(url)
          } else if (res.Code == 1) {
            this.$router.push({
              path: "/Login/Phonelogin",
            })
          } else {
            // console.log(res.Msg)
            this.$toast(res.Msg);
          }
        })
      } else {
        // console.log("")
        this.$toast('请同意安易游条款');
      }
    },

    vdetailsdata () { // 订单数据请求
      let data = {
        resSN: this.$route.query.resSN, // 标识
        gSN: this.$route.query.gSN
      }
      goodsDetails(data).then(res => { // 订单数据请求
        console.log(res)
        this.datalist = res.Item

setTimeout(() => {
      this.stepperdata(1)
    }, 500)

        if (res.Item.PassengerInfoConfig == null) {

        } else {
          if (Array.isArray(res.Item.PassengerInfoConfig)) {
            this.ticketlist = res.Item.PassengerInfoConfig
            this.ticketlist.forEach(v => {
              v.Price = res.Item.Price
              v.shul = v.Key
              v.newarr = []
              // v.show = "show"
            })
          } else {
            this.ticketlist = [res.Item.PassengerInfoConfig]
            this.ticketlist.forEach(v => {
              v.Price = res.Item.Price
              v.shul = v.Key
              v.newarr = []
              // v.show = "show"
            })
          }
        }
        this.UserInfoConfig = res.Item.UserInfoConfig
        if( this.UserInfoConfig!=null){
       this.UserInfoConfig.List.forEach(v => {
          if (v.Key == 'Mobile') {
            v.hanzhi = '11'
          }
          v.name = ''
        })

        }else{
        this.UserInfoConfig=[]

        }
 
        this.PreSalePeriod = res.Item.PreSalePeriod
        let data = res.Item.HourList
        if (data != null) {
          data.forEach((v) => {
            this.option1.push({
              text: v.Begin + '-' + v.End,
              value: v.hSN
            })
          })
          this.value1 = this.option1[0].value
        }

      })
      // CouponList(data).then(res => { // 订单数据请求
      //   console.log(res);
      //   let gsn = this.$route.query.gSN;
      //   let dataArr = [];
      //   dataArr = res.List.filter(function (item, index, array) {
      //     return (item.gSN === gsn);
      //   });
      //   this.datalist = dataArr[0];
      // })
    },
    stepperdata (value) {
      this.Totalcost = this.datalist.Price * this.stepper
      this.storagepiao = [{
        name: this.datalist.Name,
        Price: this.datalist.Price,
        value: value
      }]
    }
  },
  mounted () {
    this.vdetailsdata()
    
  }
}
</script>

<style lang="scss">
.Ordersynthesis {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .van-field__label {
    width: 110px;
  }

  .picker-calendar-day.picker-calendar-day-selected span {
    background: #46d0ca !important;
    width: 40px !important;
    height: 40px !important;
  }

  .calendarBtn {
    color: #46d0ca !important;
  }

  .picker-calendar-day span b.festivalColor {
    color: #46d0ca !important;
  }

  .picker-calendar-day span b.today {
    color: #46d0ca !important;
  }

  .picker-calendar-day.picker-calendar-day-selected span b {
    color: white !important;
  }

  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .ticket {
    /* 盒子 */
    width: 100%;
    height: auto;
    // border-radius: 0.625rem;
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    // border-bottom: 1px solid #eaeaea;

    .adult-ticket {
      /* 成人票 */
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      height: 60px;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
    }

    .rooms {
      .rooms_txt {
        padding: 10px 0;
        font-size: 16px;
        color: #000000;
        font-weight: 400;

        span {
          font-size: 13px;
          margin-left: 4px;
        }
      }

      .rooms_select {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }

      .rooms_time {
        // opacity: 0;
        height: 40px;
        margin-top: -30px;
        z-index: 9;

        .selectedDate {
          opacity: 0;
        }
      }
    }

    .ddto {
      display: flex;
      // height: 50px;
      width: 100%;
      flex-wrap: wrap;

      div {
        width: 22%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #46d0ca;
        font-size: 14px;
        font-weight: 400;
        // margin-right: 10px;
        color: #46d0ca;
        // margin: 4px;
      }
    }

    /* 游玩日期 */
    .playdate {
      display: flex;
      flex-direction: column;

      .selectdate {
        display: flex;

        /* align-items: center; */
        .selectdate-div {
          width: 22%;
          height: 70px;
          display: flex;
          align-items: center;
          flex-direction: column;
          font-size: 13px;
          justify-content: center;
          background: #ececec;
          margin-left: 0.625rem;
        }

        .active {
          border: 1px solid #46d0ca;
          color: #46d0ca;
        }

        .week {
          color: #68c5ba;
        }

        .nostate {
          color: #b5b5b5;
        }
      }
    }

    .period {
      //选择入园时间
      display: flex;
      align-items: center;
      height: 50px;

      p {
        width: 30%;
      }

      .van-dropdown-menu {
        width: 79%;
        height: 33px;
        border: 1px solid #eaeaea;
        margin-left: 0px;

        .van-dropdown-menu__title--active {
          color: #46d0ca;
        }

        .van-dropdown-item__content {
          height: 250px;
        }
      }
    }

    /* 购买数量 */
    // .quantity {
    //   display: flex;
    //   justify-content: space-between;

    //   /* border-bottom: 1px solid #eaeaea; */
    //   .quantity-box {
    //     width: 50%;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //   }
    // }
  }

  .select {
    width: 100%;
    margin: 0 auto;
    background: #f8f8f8;

    .select_select {
      display: flex;
      width: 95%;
      flex-direction: column;
      margin: 0 auto;
      border-bottom: 1px solid #eaeaea;

      .select_box {
        width: 100%;
        display: flex;
        height: 30px;
        justify-content: space-between;
        font-size: 13px;
        border-bottom: 1px solid #eaeaea;
        margin-top: 20px;
      }

      .select_bottm {
        display: flex;
        justify-content: space-between;

        .pedometer {
          display: flex;
          flex-direction: column;
          width: 100%;

          .protection {
            display: flex;

            div {
              display: flex;
              align-items: center;
              margin-right: 10px;

              .van-icon {
                font-size: 14px !important;
              }
            }
          }

          .notice {
            width: 30%;
            height: 45px;
            display: flex;
            align-items: center;
            color: #46d0ca;
          }

          .ddto {
            display: flex;
            width: 100%;
            flex-wrap: wrap;

            div {
              width: 100px;
              height: 35px;
              text-align: center;
              line-height: 35px;
              border: 1px solid #46d0ca;
              font-size: 14px;
              font-weight: 400;
              .van-icon {
                font-size: 20px !important;
              }
            }
          }
        }

        .van-stepper {
          position: absolute;
          right: 5px;
          margin-top: 10px;
        }
      }
    }
  }

  .scheduler {
    width: 100%;
    margin-top: 10px;
    background: #f8f8f8;

    .scheduler_txt {
      padding: 10px;
      font-size: 18px;
      font-weight: 400;
      color: rgb(40, 40, 40);
    }

    .scheduler_people {
      padding: 0 10px;
      display: flex;

      div {
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #46d0ca;
        margin-right: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #46d0ca;
      }
    }

    .scheduler_data {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      font-size: 13px;

      .data_name {
        display: flex;
        width: 90%;
        margin: 5px auto;
        align-items: center;
        span {
          width: 25%;
        }

        input {
          width: 78%;
          padding-left: 5px;
          // background: none;
        }
        .Areaname {
          color: #495057 !important;
        }
      }
    }
  }

  .terms {
    display: flex;
    margin-top: 20px;
    align-items: center;

    .van-checkbox__icon--checked .van-icon {
      background-color: #46d0ca !important;
      border-color: #46d0ca !important;
    }

    .van-icon {
      color: white !important;
      font-size: 16px !important;
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #ececec;

    .detail {
      display: flex;
      font-size: 14px;
      font-weight: 400;
    }

    .van-button {
      padding: 0px 30px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
    }
  }

  .tk_box {
    .van-popup {
      height: 450px;
      font-size: 14px;
      .tiaok_txt {
        width: 100%;
        position: fixed;
        height: 40px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #eee;
        .van-icon {
          position: absolute;
          right: 20px;
        }
      }
      .tiaok {
        width: 95%;
        margin: 0 auto;
        color: #5c5c5c;
        p {
          font-size: 12px;
        }
      }
    }
  }

  // 特产
  .details-box {
    width: 100%;
    // height: 200px;
    display: flex;
    justify-content: center;

    .delails-div {
      width: 95%;
      height: 100%;
      background: #f7f7f7;
      display: flex;
      justify-content: center;
      color: #969696;
      margin-top: 0.625rem;
      flex-wrap: wrap;

      .delails-first {
        width: 90%;
        font-size: 14px;
        display: flex;
        flex-direction: column;

        .delails-Secondary {
          display: flex;
          justify-content: space-between;
          height: 2.5rem;
          align-items: center;
        }

        .secondary-first {
          height: 1.875rem;
          border-bottom: 0.0625rem solid #e8e8e8;
        }
      }

      .specialty-first {
        width: 90%;
        height: 9.375rem;
        display: flex;
        ustify-content: center;
        align-items: center;
        border-bottom: 0.0625rem solid #e8e8e8;

        .specialty-secondary {
          width: 45%;
          height: 90%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .quantity_first {
        width: 90%;
        height: 3.75rem;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.0625rem solid #e8e8e8;
      }

      .delivery-first {
        width: 90%;
        height: 2.5rem;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;
        border-bottom: 1px solid #e8e8e8;
      }

      .commodity-first {
        width: 90%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }
    }
  }

  .lvke {
    width: 100%;
    height: 100%;

    .van-popup {
      width: 100%;
      height: 100%;

      .xuanzhe {
        width: 100%;
        height: 100%;

        .yd-checklist-item {
          display: flex;
          position: relative;
          // margin-left: 0.75rem;
          height: 3.125rem;
          align-items: center;
          background: white;
          border-bottom: 0.0625rem solid #eee;

          .van-checkbox__icon--checked .van-icon {
            background-color: #46d0ca !important;
            border-color: #46d0ca !important;
          }

          .van-icon {
            color: white !important;
            font-size: 16px !important;
          }
        }
      }
    }
  }

  .ioc {
    font-size: 25px !important;
  }
}
</style>